<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>12312</title>
    <script src="jessibuca.js"></script>
    <style>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
        }

        #container {
            background: rgba(13, 14, 27, 0.7);
            width: 640px;
            height: 398px;
        }

    </style>
</head>
<body>
<div>
    <div id="container"></div>
    <input autocomplete="on" id="playUrl" style="width: 640px" value=""/>
    <button id="play">播放</button>
    <button id="destroy">销毁</button>
</div>
</body>
<script>
    var $player = document.getElementById('play');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');
    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = false; //
    var jessibuca = null;
    function create() {
        jessibuca = new Jessibuca({
            container: $container,
            videoBuffer: 0.2, // 缓存时长
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            showBandwidth: true, // 显示网速
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: false,
                play: showOperateBtns,
                audio: showOperateBtns,
            },
            useWCS: true, // webcodecs 解码
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
        },);

        jessibuca.onLog = msg => console.error(msg);
        jessibuca.onRecord = (status) => console.log('onRecord', status);
        jessibuca.onPause = () => console.log('onPause');
        jessibuca.onPlay = () => console.log('onPlay');
        jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
        jessibuca.onMute = msg => console.log('onMute', msg);
        $player.style.display = 'inline-block';
        $destroy.style.display = 'none';
    }


    create();

    $player.addEventListener('click', function () {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href);
            $player.style.display = 'none';
            $destroy.style.display = 'inline-block';
        }
    }, false)
    $destroy.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.destroy();
        }
        create();
    })
</script>
</html>
